<template>
    <div class="metaData">
        <el-row
            type="flex"
            align="center"
            class="metaData-item"
            justify="space-between"
        >
            <el-col :span="24" class="operation">
                <!----<el-radio-group v-model="tabPosition" @change="handleClick">
               <el-radio-button label="basis">基础信息</el-radio-button>
               <el-radio-button label="associat">关联信息</el-radio-button>
               <el-radio-button label="change">变更信息</el-radio-button>
            </el-radio-group>--->
                <el-button-group>
                    <el-button
                        label="basis"
                        :class="[
                            'btn-notAction',
                            tabPosition == 'basis' ? 'btn-action' : ''
                        ]"
                        @click="handleClick('basis')"
                        >基础信息</el-button
                    >
                    <el-button
                        label="associat"
                        :class="[
                            'btn-notAction',
                            tabPosition == 'associat' ? 'btn-action' : ''
                        ]"
                        @click="handleClick('associat')"
                        >关联信息</el-button
                    >
                    <el-button
                        label="change"
                        :class="[
                            'btn-notAction',
                            tabPosition == 'change' ? 'btn-action' : ''
                        ]"
                        @click="handleClick('change')"
                        >变更信息</el-button
                    >
                </el-button-group>
                <div class="float-right">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        v-show="
                            ((!isRowEdit && tabPosition == 'basis') ||
                                (!isRowEdit && tabPosition == 'associat')) &&
                                (accessType == '4' || accessType == '5')
                        "
                        @click="isEdidAddHandle(tabPosition)"
                        >新增</el-button
                    >
                    <el-button
                        type="primary"
                        icon="el-icon-edit-outline"
                        size="mini"
                        @click="handleEdit(null, null, tabPosition)"
                        v-show="
                            tabPosition == 'associat' &&
                                !isRowEdit &&
                                (accessType == '4' || accessType == '5')
                        "
                        >编辑</el-button
                    >
                    <el-button
                        type="primary"
                        icon="el-icon-download"
                        size="mini"
                        @click="associatSave"
                        v-show="isRowEdit && tabPosition == 'associat'"
                        >保存</el-button
                    >
                    <el-button
                        size="mini"
                        v-show="isRowEdit && tabPosition == 'associat'"
                        @click="handleExit(null, null, tabPosition)"
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        size="mini"
                        v-show="tabPosition == 'associat'"
                        @click="handleAssociat"
                    >
                        <svg-icon icon-class="eye-open" class="svg-iconfont" />
                        关联图</el-button
                    >
                </div>
            </el-col>
        </el-row>
        <!--基础信息--->
        <template id="basis">
            <el-table
                v-show="tabPosition == 'basis'"
                :max-height="mapHeight"
                v-loading="loading"
                :data="fieldList"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="85"
                ></el-table-column>
                <el-table-column
                    label="字段名称"
                    align="center"
                    key="fieldName"
                    prop="fieldName"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.fieldName }}</span
                            >
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.fieldName"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="字段中文名称"
                    align="center"
                    key="fieldAlias"
                    prop="fieldAlias"
                    :render-header="renderfieldAliasHeader"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.fieldAlias }}</span
                            >
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.fieldAlias"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="字段类型"
                    align="center"
                    width="110"
                    key="dataType"
                    prop="dataType"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.dataType }}</span
                            >
                            <el-select
                                placeholder="请选择"
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.dataType"
                            >
                                <el-option
                                    v-for="item in fieldType"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否主键"
                    align="center"
                    key="primaryKey"
                    prop="primaryKey"
                    width="110"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.primaryKey ? "是" : "否" }}</span
                            >
                            <el-select
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.primaryKey"
                            >
                                <el-option label="是" :value="true">
                                </el-option>
                                <el-option label="否" :value="false">
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否非空"
                    align="center"
                    key="empty"
                    prop="empty"
                    width="110"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.empty ? "是" : "否" }}</span
                            >
                            <el-select
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.empty"
                            >
                                <el-option label="是" :value="true">
                                </el-option>
                                <el-option label="否" :value="false">
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="小数位数"
                    align="center"
                    key="scale"
                    prop="scale"
                    width="199"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.scale }}</span
                            >
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.scale"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="字段长度"
                    align="center"
                    key="length"
                    prop="length"
                    width="199"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.length }}</span
                            >
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.length"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="字段备注"
                    align="center"
                    key="comment"
                    prop="comment"
                    width="199"
                    :render-header="rendercommentHeader"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    !scope.row.isEdit && !scope.row.isAddRow
                                "
                                >{{ scope.row.comment }}</span
                            >
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.comment"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    key="opeart"
                    prop="deptName"
                    width="159"
                    v-if="accessType == '4' || accessType == '5'"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="
                                handleEdit(scope.$index, scope.row, tabPosition)
                            "
                            v-if="!scope.row.isEdit && !scope.row.isAddRow"
                        >
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            @click="
                                handleSave(scope.$index, scope.row, tabPosition)
                            "
                            v-if="scope.row.isEdit || scope.row.isAddRow"
                        >
                            保存
                        </el-button>
                        <el-button
                            size="mini"
                            @click="
                                handleExit(scope.$index, scope.row, tabPosition)
                            "
                            v-if="scope.row.isEdit || scope.row.isAddRow"
                        >
                            取消
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0 && tabPosition == 'basis'"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getAssociatList"
            />
        </template>
        <!--关联信息--->
        <template id="associat">
            <el-table
                v-show="tabPosition == 'associat'"
                max-height="708"
                v-loading="loading"
                :data="userList"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="85"
                ></el-table-column>
                <el-table-column
                    label="本表字段"
                    align="center"
                    key="fieldName"
                    prop="fieldName"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    (!scope.row.isAddRow || isAllEdit) &&
                                        !isAllEdit
                                "
                                >{{ scope.row.fieldName }}</span
                            >
                            <el-select
                                v-model="scope.row.fieldName"
                                @change="
                                    handleselectRefTableName(
                                        $event,
                                        scope.$index,
                                        'fieldName'
                                    )
                                "
                                placeholder="请选择"
                                v-show="scope.row.isAddRow || isAllEdit"
                            >
                                <el-option
                                    v-for="item in fieldList"
                                    :key="item.fieldName"
                                    :label="item.fieldName"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="关联库名称"
                    align="center"
                    key="refTableAlias"
                    prop="refTableAlias"
                    width="250"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    (!scope.row.isAddRow || isAllEdit) &&
                                        !isAllEdit
                                "
                                >{{ scope.row.refTableAlias2 }}</span
                            >
                            <el-cascader
                                v-model="scope.row.refdirPathId"
                                :options="TreeList"
                                :props="{
                                    value: 'id',
                                    label: 'dirName',
                                    children: 'children'
                                }"
                                @change="handleItemChange"
                                v-show="scope.row.isAddRow || isAllEdit"
                            ></el-cascader>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="关联表单名称"
                    align="center"
                    width="250"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span v-show="!scope.row.isAddRow && !isAllEdit">{{
                                scope.row.refTableAlias
                            }}</span>
                            <el-select
                                v-model="scope.row.refTableAlias"
                                filterable
                                v-show="scope.row.isAddRow || isAllEdit"
                                placeholder="请输入关键词"
                                @change="
                                    handleselectRefTableName(
                                        $event,
                                        scope.$index,
                                        'refTableName'
                                    )
                                "
                            >
                                <el-option
                                    v-for="items in baseDataList"
                                    :key="items.tableName"
                                    :label="items.tableAlias"
                                    :value="items.id"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="关联表单名称（英）"
                    align="center"
                    width="250"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.refTableName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="关联表字段"
                    align="center"
                    key="refFieldName"
                    width="250"
                    prop="refFieldName"
                >
                    <template slot-scope="scope">
                        <div>
                            <span
                                v-show="
                                    (!scope.row.isAddRow || isAllEdit) &&
                                        !isAllEdit
                                "
                                >{{ scope.row.refFieldName }}</span
                            >
                            <el-select
                                v-model="scope.row.refFieldName"
                                @change="
                                    handleselectRefTableName(
                                        $event,
                                        scope.$index,
                                        'RefTableNameList'
                                    )
                                "
                                placeholder="请选择"
                                v-show="scope.row.isAddRow || isAllEdit"
                            >
                                <el-option
                                    v-for="item in RefTableNameList"
                                    :key="item.fieldName"
                                    :label="item.fieldName"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="159"
                    v-if="accessType == '4' || accessType == '5'"
                >
                    <template slot-scope="scope">
                        <p
                            class="danger-simple-btn simple-btn"
                            @click="handleDelete(scope.row)"
                            v-if="
                                !scope.row.isEdit &&
                                    !isAllEdit &&
                                    !scope.row.isAddRow
                            "
                            plain
                        >
                            删除
                        </p>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--变更信息--->
        <template id="change">
            <el-table
                v-show="tabPosition == 'change'"
                :max-height="mapHeight"
                v-loading="loading"
                :data="ChangelogList"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
                border
            >
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="85"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更类型"
                    align="center"
                    key="logTypeName"
                    prop="logTypeName"
                    width="199"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.logTypeName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更数量"
                    align="center"
                    key="updateCount"
                    prop="updateCount"
                    width="199"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.updateCount }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更描述"
                    align="center"
                    key="comment"
                    prop="comment"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span v-show="!scope.row.isEdit">{{
                                scope.row.comment
                            }}</span>
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.comment"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更内容"
                    align="center"
                    key="content"
                    prop="content"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <div>
                            <span v-show="!scope.row.isEdit">{{
                                scope.row.content
                            }}</span>
                            <el-input
                                v-show="scope.row.isEdit || scope.row.isAddRow"
                                v-model="scope.row.content"
                            ></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更时间"
                    align="changTime"
                    key="createTime"
                    prop="createTime"
                >
                    <template slot-scope="scope">
                        <div>
                            <span>{{
                                parseTime(
                                    new Date(scope.row.createTime),
                                    "{y}-{m}-{d}"
                                )
                            }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="变更人"
                    align="center"
                    key="operator"
                    prop="operator"
                    width="199"
                >
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.operator }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="159"
                    v-if="accessType == '4' || accessType == '5'"
                >
                    <template slot-scope="scope">
                        <el-button  size="mini"
                            @click="
                                handleEdit(scope.$index, scope.row, tabPosition)
                            "
                            v-if="!scope.row.isEdit && !scope.row.isAddRow"
                        >
                            编辑
                        </el-button>
                        <el-button  size="mini"
                            @click="
                                handleSave(scope.$index, scope.row, tabPosition)
                            "
                            v-if="scope.row.isEdit || scope.row.isAddRow"
                        >
                            保存
                        </el-button>
                        <el-button
                            size="mini"
                            @click="
                                handleExit(scope.$index, scope.row, tabPosition)
                            "
                            v-if="scope.row.isEdit || scope.row.isAddRow"
                        >
                            取消
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total2 > 0 && tabPosition == 'change'"
                :total="total2"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getChangelogList"
            />
        </template>
    </div>
</template>
<script>
import {
    getFieldsList,
    setFieldsList,
    getlogList,
    getRelationList,
    EditRelationList,
    getDatabeseAllList,
    deletemetadata
} from "@/api/dataManagement/system/info";
import { mapTreeItem } from "@/api/dataManagement/system/dir";
import { fieldType } from "@/assets/js/fieldTypeList";
import { setLogComment } from "@/api/dataManagement/system/log";
import { getHeight } from "@/utils/zkComm";
export default {
    name: "metaData",
    props: {
        isEdit: {
            type: Boolean
        },
        accessType: Number
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            tabsMap: {
                basis: "fieldList",
                associat: "userList",
                change: "ChangelogList"
            },
            fieldType,
            mapHeight: undefined,
            total: 0,
            total2: 0,
            // 用户表格数据
            userList: [],
            loading: "",
            treeDirId: "",
            //基础信息
            fieldList: [],
            // 变更记录
            ChangelogList: [],
            // 分页查询
            queryParams: {
                pageNum: 1,
                pageSize: 30,
                tableId: ""
            },
            tabPosition: "basis",
            isAddRow: false,
            isRowEdit: false,
            isAllEdit: false,
            value: "",
            TreeList: [],
            tableId: "",
            baseDataList: [],
            RefTableNameList: []
        };
    },
    created() {
        this.tableId = this.$route.params.tableId;
        this.tabPosition = this.$route.query.associat
            ? this.$route.query.associat
            : "basis";
        if (this.$route.query.associat == "basis") {
            this.getFieldsbasicList();
        }
        if (this.$route.query.associat == "associat") {
            this.getAssociatList();
        }
        if (this.$route.query.associat == "ChangelogList") {
            this.getChangelogList();
        }
        this.getFieldsbasicList();
        this.getTreeList();
    },
    mounted() {
        this.mapHeight = getHeight(false) - 20;
    },
    methods: {
        //获取元数据信息-基础信息
        getFieldsbasicList() {
            getFieldsList({
                params: { tableId: this.tableId },
                methods: "get"
            }).then(res => {
                res.data.forEach(ele => {
                    ele.isEdit = false;
                });
                this.fieldList = res.data;
            });
        },
        addIsEditfiled(data) {
            if (!Array.isArray(data)) {
                return data;
            }
        },
        renderfieldAliasHeader(h, { column, $index }) {
            return h("div", {
                attrs: {
                    class: "cell"
                },
                domProps: {
                    innerHTML: column.label + '<p class="red">[仅限于平台]</p>'
                }
            });
        },
        rendercommentHeader(h, { column, $index }) {
            return h("div", {
                attrs: {
                    class: "cell"
                },
                domProps: {
                    innerHTML:
                        column.label + '<p class="red">[同步数据库comment]</p>'
                }
            });
        },
        // 关联信息
        getAssociatList() {
            getRelationList({ tableId: this.tableId }).then(res => {
                if (res.code == 200) {
                    var data = res.data;
                    data.forEach(res => {
                        res.isEdit = false;
                        res.isAddRow = false;
                        res.refTableAlias2 = res.refDirPath;
                        res.refdirPathId = [];
                        var dirPathArr = res.refDirPath.split(">");
                        for (var i = 0; i < dirPathArr.length; i++) {
                            resetPath(this.TreeList, 0, dirPathArr[i]);
                        }
                        function resetPath(data, leave, keyword) {
                            var leave = leave || 0;
                            leave++;
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].dirName == keyword) {
                                    res.refdirPathId.push(data[i].id);
                                } else {
                                    if (data[i].children) {
                                        resetPath(
                                            data[i].children,
                                            leave,
                                            keyword
                                        );
                                    }
                                }
                            }
                        }
                    });
                    this.userList = res.data;
                }
            });
        },
        // 变更记录
        getChangelogList() {
            getlogList({ tableId: this.tableId, changeType: "metadata" }).then(
                res => {
                    if (res.code == 200 && res.rows.length > 0) {
                        res.rows.forEach(ele => {
                            ele.isEdit = false;
                        });
                        this.ChangelogList = res.rows;
                        this.total2 = res.total;
                    }
                }
            );
        },
        handleRowClick(index) {
            console.log(index);
        },
        handleSelectionChange(index) {
            console.log(index);
        },
        handleChange() {},
        // 获取树结构
        getTreeList() {
            mapTreeItem().then(res => {
                var temp = [];
                var map = {};
                var data = res.data.children;
                resetData(data);
                function resetData(data, leave) {
                    var leave = leave || 0;
                    leave++;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].children.length == 0) {
                            delete data[i].children;
                        } else {
                            resetData(data[i].children, leave);
                        }
                    }
                }
                this.TreeList = data;
            });
        },
        // 内页tabs 且换
        handleClick(label) {
            if (this.isAddRow || this.isRowEdit) {
                this.$message({
                    message: "新增和编辑中不能进行切换",
                    type: "warning"
                });
                return false;
            }
            this.tabPosition = label;
            if (label == "basis") {
                // 基础信息
                this.getFieldsbasicList();
                this.mapHeight = getHeight(false) - 20;
            } else if (label == "associat") {
                // 关联信息
                this.getAssociatList();
                this.mapHeight = getHeight(false) - 20;
            } else {
                // 变更信息
                this.getChangelogList();
                this.mapHeight = getHeight(true) - 20;
            }
        },
        // 新增按钮
        isEdidAddHandle(tab) {
            if (this.isRowEdit) {
                this.$message({
                    message: "先保存再进行新增数据",
                    type: "warning"
                });
                return false;
            }
            var dataList = this[this.tabsMap[tab]]
                ? this[this.tabsMap[tab]][0]
                : "";
            var addRow = {};
            if (tab == "associat") {
                dataList = {
                    fieldName: "",
                    refTableName: "",
                    refFieldName: "",
                    refTableAlias2: "",
                    refTableAlias: ""
                };
            }
            if (dataList) {
                for (var item in dataList) {
                    addRow[item] = null;
                }
                addRow.isAddRow = true;
                this.isAddRow = true;
                this.isRowEdit = true;
                this[this.tabsMap[tab]].push(addRow);
            }
        },
        // 控制数据中是否编辑
        getpreviewList(index, dataArr) {
            var previewList = this[dataArr];
            previewList[index].isEdit = !previewList[index].isEdit;
            if (previewList[index].isAddRow)
                previewList[index].isAddRow = false;
        },
        // 编辑
        handleEdit(index, row, tabs) {
            if (this.isRowEdit) {
                this.$message({
                    message: "请先保存正在编辑的数据后再进行编辑",
                    type: "warning"
                });
                return false;
            }
            if (index !== null) {
                this.getpreviewList(index, this.tabsMap[tabs]);
            }
            this.isRowEdit = true;
            this.isAllEdit = true;
        },
        // 保存
        handleSave(index, row, tabs) {
            this.getpreviewList(index, this.tabsMap[tabs]);
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.isAddRow = false;
            var params = {
                method: "put",
                text: "编辑"
            };
            if (tabs == "basis") {
                if (row.isAddRow == false) {
                    params.method = "post";
                    params.text = "新增";
                } else {
                    params.method = "put";
                    params.text = "编辑";
                }
                setFieldsList({
                    tableId: this.tableId,
                    data: row,
                    method: params.method
                })
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: params.text + "成功",
                                type: "success"
                            });
                            this.getFieldsbasicList();
                        }
                    })
                    .catch(err => {
                        this.getFieldsbasicList();
                    });
            } else if (tabs == "change") {
                setLogComment({ id: row.id, query: { comment: row.comment } })
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: params.text + "成功",
                                type: "success"
                            });
                            this.getChangelogList();
                        }
                    })
                    .catch(res => {
                        this.getChangelogList();
                    });
            }
        },
        // 取消按钮
        handleExit(index, row, tabs) {
            if (row ? row.isAddRow : true) {
                var data = this[this.tabsMap[tabs]];
                if (index) {
                    data.splice(index, 1);
                } else if (this.isAddRow) {
                    data.splice(this[this.tabsMap[tabs]].length - 1, 1);
                }
                this[this.tabsMap[tabs]] = data;
                this.isRowEdit = false;
                this.isAllEdit = false;
                this.isAddRow = false;
            } else {
                this.getpreviewList(index, this.tabsMap[tabs]);
                this.isRowEdit = false;
                this.isAllEdit = false;
            }
            if (tabs == "basis") {
                this.getFieldsbasicList();
            }
            if (tabs == "change") {
                this.getChangelogList();
            }
        },
        // 关联信息 编辑按钮
        associatEdit() {
            this.isAllEdit = true;
            this.isRowEdit = true;
        },
        // 关联按钮
        handleAssociat() {
            this.$router.push(
                "/DMS/dataMap/mapDirectory/associatMap?tableId=" +
                    this.tableId +
                    "&dirId=" +
                    this.$route.query.dirId
            );
        },
        // 保存按钮
        associatSave() {
            var messageText = "编辑";
            if (!this.isAllEdit) {
                messageText = "新增";
            } else {
                messageText = "编辑";
            }
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.isAddRow = false;
            if (!this.userList[this.userList.length - 1].refDirId) {
                this.userList[
                    this.userList.length - 1
                ].refDirId = this.treeDirId;
            }
            EditRelationList({
                method: "put",
                tableId: this.tableId,
                list: this.userList
            })
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: messageText + "成功",
                            type: "success"
                        });
                    }
                    this.getAssociatList();
                })
                .catch(res => {
                    this.getAssociatList();
                });
        },
        handleItemChange(val) {
            let that = this;
            getChild(that.TreeList, val[val.length - 1]);
            function getChild(data, dirId) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].id == dirId) {
                        that.treeDirId = data[i].id;
                        getDatabeseAllList({ dirId: that.treeDirId }).then(
                            res => {
                                that.baseDataList = res.data;
                            }
                        );
                    } else if (
                        data[i].children &&
                        data[i].children.length > 0
                    ) {
                        getChild(data[i].children, dirId);
                    }
                }
                that.TreeList = data;
            }
        },
        handleselectRefTableName(val, index, type) {
            if (type == "refTableName") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableName",
                    this.baseDataList,
                    "tableName"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableAlias",
                    this.baseDataList,
                    "tableAlias"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refTableId",
                    this.baseDataList,
                    "id"
                );
                getFieldsList({
                    params: { tableId: val },
                    methods: "get"
                }).then(res => {
                    this.RefTableNameList = res.data;
                });
            } else if (type == "RefTableNameList") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refFieldId",
                    this.RefTableNameList,
                    "id"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "refFieldName",
                    this.RefTableNameList,
                    "fieldName"
                );
            } else if (type == "fieldName") {
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "fieldId",
                    this.fieldList,
                    "id"
                );
                this.setUserList(
                    this.userList,
                    index,
                    val,
                    "fieldName",
                    this.fieldList,
                    "fieldName"
                );
            }
        },
        setUserList(data, index, val, name, refData, refName) {
            for (var i = 0; i < refData.length; i++) {
                if (refData[i].id == val) {
                    data[index][name] = refData[i][refName];
                }
            }
        },
        updataHandle() {
            this.tabPosition = "basis";
            this.isAddRow = false;
            this.isRowEdit = false;
            this.isAllEdit = false;
            this.getFieldsbasicList();
        },
        // 元数据关联信息删除
        handleDelete(item) {
            // /datacenter/system/table/{relationId}/metadata/relation/delete?dirId=
            console.log(item, "1132123");
            deletemetadata({
                relationId: item.relationId,
                dirId: item.dirId
            }).then(res => {
                this.$message({
                    message: "删除成功",
                    type: "success"
                });
                this.getAssociatList();
            });
        },
        remoteMethod(query) {
            //    var that = this;
            //   if (query !== '' && that.treeDirId) {
            //       getDatabeseList({dirId:that.treeDirId,pageNum: 1,pageSize: 100,tableName:query}).then(res=>{
            //             for(var i=0;i<res.rows.length;i++){
            //                console.log()
            //                res.rows[i].label =  res.rows[i].tableName
            //                res.rows[i].value =  res.rows[i].tableName
            //             }
            //             that.baseDataList = res.rows
            //             that.$set(that.baseDataList,res.rows)
            //             console.log(that.baseDataList)
            //       })
            //   }
        }
    }
};
</script>

<style>
.red {
    color: rgb(184, 180, 180);
    margin: 0;
}
</style>
<style lang="scss" scoped>
/****
 reset element style
.

 */

/****
 reset element style
.

 */
.svg-iconfont {
    vertical-align: -0.1em;
}
.metaData {
    padding-top: 20px;
}
.metaData-item {
    margin-bottom: 10px;
}
.btn-notAction {
    border-radius: 0px !important;
}
.btn-action {
    background: #1183f8;
    color: #ffffff;
}
</style>
